<template>
  <el-col v-bind="layoutProps">
    <div
      class="field-wrapper"
      :class="{
        'design-time-bottom-margin': designer.designStatus,
        selected: selected,
      }"
      :style="{ display: displayStyle }"
    >
      <div
        v-if="!field.options.hidden || designState === true"
        class="static-content-item"
        :style="{ display: displayStyle }"
        @click.stop="selectField(field.id)"
      >
        <slot />
      </div>

      <template v-if="designer.designStatus">
        <div v-if="designer.selectedId === field.id" class="field-action">
          <i
            v-if="parentId"
            class="el-icon-back"
            title="选中父组件"
            @click.stop="selectField(parentId)"
          />
          <i
            class="el-icon-copy-document"
            title="复制"
            @click.stop="cloneUnit(field)"
          />
          <i
            class="el-icon-delete"
            title="删除"
            @click.stop="removeUnit(field.id)"
          />
        </div>

        <div
          v-if="designer.selectedId === field.id"
          class="drag-handler background-opacity"
        >
          <i class="el-icon-rank" title="拖动" />
          <i>{{ field.title }}</i>
          <i v-if="field.options.hidden === true" class="iconfont icon-hide" />
        </div>
      </template>
    </div>
  </el-col>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import i18n from "Yan/utils/i18n";

export default {
  name1: "static-content-wrapper",
  mixins: [i18n],
  props: {
    field: Object,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    designState: {
      type: Boolean,
      default: false,
    },
    displayStyle: {
      type: String,
      default: "block",
    },
  },
  computed: {
    selected() {
      return (
        this.designer.designStatus && this.field.id === this.designer.selectedId
      );
    },

    customClass() {
      return this.field.options.customClass
        ? this.field.options.customClass.join(" ")
        : "";
    },

    layoutProps() {
      return {
        span: this.field.options.span || 12,
        offset: this.field.options.offset || 0,
        push: this.field.options.push || 0,
        pull: this.field.options.pull || 0,
      };
    },
  },
  methods: {
    // 选中表单单元
    selectField(field) {
      if (this.designer.designStatus) {
        this.designer.setSelected(field);
        // this.designer.emitEvent("field-selected", this.parentWidget); //发送选中组件的父组件对象
      }
    },
    // 克隆表单单元
    cloneUnit(unit) {
      if (this.parentList) {
        const newCon = this.designer.copyNewFieldUnit(unit);
        this.designer.addFieldLib(newCon);
        this.parentList.splice(this.indexOfParentList + 1, 0, {
          id: newCon.id,
          children: [],
        });
        this.designer.setSelected(newCon.id);
        this.designer.emitHistoryChange();
      }
    },
    removeUnit(id) {
      if (this.parentList) {
        this.designer.removeFieldLib(id);
        this.parentList.splice(this.indexOfParentList, 1);
        let nextSelect =
          this.parentList.length > this.indexOfParentList
            ? this.indexOfParentList
            : this.indexOfParentList - 1;
        if (this.parentList.length > 0) {
          nextSelect =
            this.parentList.length > this.indexOfParentList
              ? this.indexOfParentList
              : this.indexOfParentList - 1;
        } else nextSelect = this.parentId;

        this.designer.setSelected(
          nextSelect
            ? typeof nextSelect === "string"
              ? nextSelect
              : nextSelect.id
            : null
        );
        this.designer.emitHistoryChange();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//

.design-time-bottom-margin {
  margin-bottom: 5px;
}

.field-wrapper {
  position: relative;

  .field-action {
    position: absolute;
    //bottom: -24px;
    bottom: 0;
    right: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: 0;
    //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
    left: -1px;
    height: 20px;
    line-height: 20px;
    background: $--color-primary;
    z-index: 9;
    opacity: 0.5;

    i {
      font-size: 12px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }
  }
  &:hover {
    .drag-handler {
      opacity: 1;
    }
  }
}

.static-content-item {
  min-height: 20px;
  display: flex; /* 垂直居中 */
  align-items: center; /* 垂直居中 */

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.field-wrapper.selected {
  outline: 2px solid $--color-primary;
}
</style>
